<template>
	<view>
        <!-- 轮播图 -->
		<view class="carousel-box">		
			<view class='swiper'>
				<swiper class="swiper-c" :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay" :interval="swiper.interval"
				 :duration="swiper.duration">
					 <swiper-item v-for="(item, index) in swiper_img" :key="index" @click="clickImg(item)">
						<img :src="item.img_path" alt="">
					</swiper-item>
				</swiper>
			</view>
        </view>

		<view class="row">
            <!--基本信息-->
            <view class="mod mod-base">
                <view class="bd">
                    <view class="collect">
                        <view class="collect-img">
                            <img src="@/static/img00/shoucang.png" alt="">
                        </view>  
                        <span>收藏</span>
                    </view>

                    <view class="name-price-wrap inline-tag">
                        <view class="name">
                            <h2>{{info.name}}</h2>
                        </view>
                        <view class="lb-area new-lb-area">
                            <span v-for="(item, index) in info.cate_type_arr" :key="index" class="new-lbs new-lbs-bq" >{{item}}</span>
                            <!-- <span class="new-lbs new-lbs-bq" >精致小户</span> -->
                        </view>
                    </view>

                    <!-- 楼盘字典1.0--新添加-start -->
                    <!-- 楼盘字典1.0--新添加-end -->

                    <ul class="base-info">
                        <li>
                            <view class="list-l">参考总价：</view>
                            <view class="list-r total-price">
                                <span>108</span>
                            </view>
                        </li>
                        <li>
                            <view class="list-l">单价：</view>
                            <view class="list-r total-price">
                                <span>23000</span></view>
                        </li>

                        <li>
                            <view class="list-l">建筑面积：</view>
                            <view class="list-r">
                                <span>51㎡</span>
                            </view>
                        </li>

                        <li class="orientation">
                            <view class="list-l">房屋朝向：</view>
                            <view class="list-r">
                                <span></span>
                            </view>
                        </li>

                        <li>
                            <view class="list-l">层高：</view>
                            <view class="list-r">
                                <span>4.78</span>
                            </view>
                        </li>

                        <li>
                            <view class="list-l">类型：</view>
                            <view class="list-r">
                                <span></span>
                            </view>
                        </li>

                        <li class="loudong">
                            <view class="list-l">所在楼栋：</view>
                            <view class="list-r">
                                <span></span>
                            </view>
                        </li>

                    </ul>
                </view>
            </view>
        </view>


        <view class="row row-notop ab-test-b">
            <view class="mod mod-als">
                <view class="hd">
                    <h3>户型解析</h3>
                </view>
                <view class="bd">
                    <view class="als">
                        <view class="tit">居室详解</view>
                    </view>
                    <view class="als">
                        <view class="tit">户型分析</view>
                    </view>
                </view>
            </view>
        </view>

        <view class="kong"></view>

        <view class="fixed">
            <dbtk></dbtk>
        </view>
        

	</view>
</template>

<script>
    import Dbtk from 'pages/index/type/Dbtk'

	export default {

        components: {
			Dbtk,
		},

		data() {
			return {
				swiper: {
					indicatorDots: true,
					autoplay: true,
					interval: 3000,
					duration: 800,
                }, // 轮播图属性设置
				loupan_id:0,
                huxing_id:0,
				swiper_img:{},
				info:{}
			}
		},
		onLoad(e) {
			let _this = this;
			this.loupan_id = e.loupan_id;
			this.huxing_id = e.huxing_id;
			// console.log(huxing_id);
			this.$api.getHuxingDetail({
					loupan_id:_this.loupan_id,
					huxing_id:_this.huxing_id
				},
				res => {
					_this.swiper_img = res.swiper_img;
					_this.info = res.info;
					// console.log(_this.info);
				}
			);
		},
		methods: {
          
		}
	}
</script>

<style scoped>
    *{
        margin: 0 ;
        padding: 0 ;
        list-style: none;
    }
	.carousel-box{
		height: 360rpx;
		background: #999;
	}

    .row{
        background: #fff;
    }
    .mod{
        margin: 0 40rpx 20rpx 40rpx;
        padding-top: 40rpx;
        padding-bottom: 60rpx;
    }

    .collect{
        height:68rpx;
        width: 114rpx;
        float: right;
        border-left: 1px solid #77808a;
    }
    .collect-img{
        height: 36rpx;
        width: 36rpx;
        margin: 0 auto;
    }
    .collect-img>img{
        height: 100%;
        width: 100%;
    }
    .collect>span{
        font-size: 24rpx;
        color: #77808a;
        margin-left: 30rpx;
    }

    .name-price-wrap{
        width: 600rpx;
    }
    .name{
        margin-bottom: 10rpx;
    }

    .lb-area{
        width: 600rpx;
        margin-top: 20rpx;
    }
    .new-lbs{
        margin-right: 10rpx;
        padding: 4rpx 10rpx;
        border: 1px solid #77808a;
        font-size: 24rpx;
        color:#77808a;
        border-radius: 6rpx;    
    }

    .base-info{
        margin-top: 60rpx;
        display: flex;
          flex-wrap:wrap;
    }
    .base-info>li{
        width: 334rpx;
        height: 60rpx;
        display: flex;
       line-height: 60rpx;
    }
   
    .list-l{
         color:#77808a;
    }
    .list-r{
        font-size: 32rpx;
        color: #3e4a59;
        font-weight: 550;
    }
     .total-price{
        color: #fa5f35;
        font-size: 40rpx;
    }

    .hd{
        font-size: 44rpx;
        color: #3e4a59;
        font-weight: 700;
    }
    .bd{
        margin-top: 30rpx;
    }
    .als{
        margin-bottom: 40rpx;
        color: #3e4a59;
        font-size: 32rpx;
        font-weight: 550;
    }
    .tit{
        background: #f3f6f9;
        padding: 10rpx 10rpx;
    }


    .fixed{
        position: fixed;
        bottom: 0;
        background: #fff;
         height: 114rpx;
    }
    .kong{
        height: 40rpx;
    }
	
	
	
	
	
	.swiper {
		height: 360rpx;
	}
	.swiper-c {
		height: 100%;
	}
	
	.swiper-c img {
		height: 100%;
		width: 100%;
	}
	.swiper-list .img-grids-item {
		height: 350rpx !important;
	}
	
	.swiper-grids .swiper-list {
		white-space: nowrap;
		width: 100%;
		min-height: 200upx;
	}
	
	.swiper-grids .img-grids-item {
		float: none;
		margin-right: 0;
		width: 255upx;
		margin-top: 0;
	}
	
	.swiper-grids .img-grids-item:last-child {
		margin-right: 26upx;
	}
	
	.swiper-grids .img-grids-item-t {
		width: 255upx;
		height: 255upx;
	}
	
	.swiper-grids .goods-name {
		white-space: normal;
	}
	
</style>